<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset='UTF-8'>	
	<title>Lobby page</title>
	<link rel='stylesheet' href='css/style.css' />	
	<link rel='stylesheet' href='css/popup.css' /> 
    <link rel="stylesheet" href="css/authors.css" type="text/css" media="screen">
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src='js/jquery.color-RGBa-patch.js'></script>
    <script src='js/example.js'></script>
    <script src='js/jquery.utilities.js'></script>
	<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
    <script src='js/jquery.lobby.js'></script>
	<script type="text/javascript">
      $(document).ready(function() {
        $("#popupBackground").click(function(){disablePopup();});
        
        checkUsername();
        checkPlayingStatus();
        // Keep updating top lists and chat
        updateLists();
        getAllMessages();
      });
	</script>    
</head>

<body>
  <div id="popupBackground"></div>
  <div class="popup" id="statuspopup"></div>
  
	<table cellspacing="0" cellpadding="0" border="0" align="center" width="800">
		<tr>
    		<td>
            	<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100">
					<tr>
    					<td><img src="img/lobby_welcome.png" /></td>
					</tr>
				</table>
                
                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="50">
                	<tr>
                    	<td>
                       		 <div class="nav-wrap">   
                                <ul class="group" id="menu_bar">
                                  <li><a rel="#fe4902" href="index.html">Home</a></li>
                                  <li><a rel="#A41322" onclick="newGamePopup()">Start Battle</a></li>
                                  <li><a rel="#C6AA01" href="javascript:window.open('rules.html','Site','width=800,height=600 scrollbars=1')">Rules</a></li>
                                  <li class="current_page_item_two"><a rel="#900" href="javascript:openWindow('settings.html','Site','width=800,height=600 scrollbars=1')">Settings</a></li>
                                  <li><a rel="#D40229" href="javascript:window.open('Help.html','Site','width=800,height=600 scrollbars=1')">Help</a></li>
                                  <li><a rel="#98CEAA" href="authors.html">About Our Project</a></li>
                                  <li><a rel="#1B9B93" href="javascript:window.open('donate.html','Site','width=800,height=600 scrollbars=1')">Donate</a></li>
                                  <li><a rel="#8DC91E" href="#">Exit</a></li>
                                </ul>
                            </div>		
                        </td>
                    </tr>
                </table>  
                
                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="50">
                	<tr>
                    	<td>
                           <div id="wrapper">
                                <img src="img/authors.png" alt="moving boxes" />
                                <div id="slider">    
                                    <img class="scrollButtons left" src="img/leftarrow.png">
                                    <div style="overflow: hidden;" class="scroll">
                                        <div class="scrollContainer">
                                            <div class="panel" id="panel_1">
                                                <div class="inside">
                                                    <img src="img/dima.png" alt="dima_picture" />
                                                    <h2>Dmitri Timašjov</h2>
                                                </div>
                                            </div>
                                            <div class="panel" id="panel_2">
                                                <div class="inside">
                                                    <img src="img/iangelina.jpg" alt="angelina_picture" />
                                                    <h2>Angelina Kozina</h2>
                                                </div>
                                            </div>
                                            <div class="panel" id="panel_3">
                                                <div class="inside">
                                                    <img src="img/karl.jpg" alt="karl_picture" />
                                                    <h2>Karl Aksel Puulmann</h2>
                                                </div>
                                            </div>
                                        
                                        </div>
                        
                                        <div id="left-shadow"></div>
                                        <div id="right-shadow"></div>
                        
                                    </div>
                        
                                    <img class="scrollButtons right" src="img/rightarrow.png">
                        
                                </div>
                                
                            </div>
                        </td>
                    </tr>
                </table>  
            </td>
   		</tr>
   </table>
   
   
</body>

</html>